<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<meta name="format-detection" content="telephone=no" /> 
<link rel="shortcut icon" href="images/logo.ico" />
<title>闪度生活</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />


<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.1.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/swiper-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<script src="js/main.js"></script>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/axios-config.js"></script>
<script src="./js/js.cookie.js"></script>
<script src="./js/utils.js"></script>
<script src="js/footer.js"></script>

</head>

<body class="body_bg">

<div id="app" v-cloak>

<div class="stroy_nav">
  <div class="stroy_banr">
    <div class="swiper-container swiper-stroy_banr">
      <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="images/stroy_ban1.jpg" width="100%"></div>
          <div class="swiper-slide"><img src="images/stroy_ban2.jpg" width="100%"></div>
      </div>
    </div>
  </div>
  <div class="stroy_head clearfix">
    <div class="stroy_head_l">
      <a href="search2.html">搜索</a>
      <a href="stroy_join.html">我要参加</a>
    </div>
    <div class="stroy_head_r">
      <a href="stroy1_ranking.html">活动排行</a>
      <a href="stroy1_rules.html">活动规则</a>
    </div> 
  </div>
</div>


<!--  / warpper  -->
<div class="warpper warpper_str">
  <div class="stroy1_class">
    <div class="swiper-container swiper-stroy1_class">
      <div class="swiper-wrapper">
      	
          <div class="swiper-slide" v-for="(item,index) in story_cate" @click="getCateList(item.cate_id)">
          	<a href="##" class="stroy1_class_bt" :class="cateId==item.cate_id?'on':''">{{item.classname}}</a>
          </div>
          
      </div>
    </div>
  </div>
  
  
  
  <div class="stroy-item1">
  
  <div class="stroy1_popularity mar_b" @click="goInner(stroy_best.oldstory_id)">
    <a href="stroy1_inner.html">
      <h5 class="popular_tit">最佳人气</h5>
      
      <div class="popular_img mar_b">
        <img :src="stroy_best.pic" width="100%">
      </div>
      
      <div class="popular_text">
        <h5>{{stroy_best.title}}</h5>
        <p class="text">
          {{stroy_best.content}}
        </p>
        <div class="stroy_function clearfix">
          <span class="left">人气：{{stroy_best.popularity}}</span>
          <span class="right">编号：{{stroy_best.number}}</span>
        </div>
      </div>
    </a>
  </div>
  
  <div class="wapSpace"></div>
  
  <div class="stroy1_hot mar_b">
  	
  	<h5 class="popular_tit pad">热门故事 <a href="story1_hotList.html" class="more" @click="goList">更多</a></h5>
  	
    <div class="stroy1_hot_box clearfix" v-for="items2 in stroy_hot" @click="goInner(items2.oldstory_id)">
      <a href="stroy1_inner.html">
        <div class="stroy1_hot_img">
          <img :src="items2.pic" width="100%">
        </div>
        <div class="stroy1_hot_text">
          <h5>{{items2.title}}</h5>
          <p class="text">
            {{items2.content}}
          </p>
          <div class="stroy_function clearfix">
            <span class="left">人气：{{items2.popularity}}</span>
            <span class="right">编号：{{items2.number}}</span>
          </div>
        </div>
      </a>
    </div>
    <!-- <div class="stroy1_hot_box clearfix">
      <a href="stroy1_inner.html">
        <div class="stroy1_hot_img">
          <img src="images/stroy_hot1.jpg" width="100%">
        </div>
        <div class="stroy1_hot_text">
          <h5>子不语怪力乱神</h5>
          <p class="text">
            的；客官说的那个；上课的功能；适当的；各路大神给多少；感动生命
          </p>
          <div class="stroy_function clearfix">
            <span class="left">人气：3</span>
            <span class="right">编号：00035</span>
          </div>
        </div>
      </a>
    </div>
    <div class="stroy1_hot_box clearfix">
      <a href="stroy1_inner.html">
      <div class="stroy1_hot_img">
        <img src="images/stroy_hot2.jpg" width="100%">
      </div>
      <div class="stroy1_hot_text">
        <h5>子不语怪力乱神</h5>
        <p class="text">
          的；客官说的那个；上课的功能；适当的；各路大神给多少；感动生命
        </p>
        <div class="stroy_function clearfix">
          <span class="left">人气：3</span>
          <span class="right">编号：00035</span>
        </div>
      </div>
      </a>
    </div>
    <div class="stroy1_hot_box clearfix">
      <a href="stroy1_inner.html">
      <div class="stroy1_hot_img">
        <img src="images/stroy_hot3.jpg" width="100%">
      </div>
      <div class="stroy1_hot_text">
        <h5>子不语怪力乱神</h5>
        <p class="text">
          的；客官说的那个；上课的功能；适当的；各路大神给多少；感动生命
        </p>
        <div class="stroy_function clearfix">
          <span class="left">人气：3</span>
          <span class="right">编号：00035</span>
        </div>
      </div>
      </a>
    </div> -->
  </div>
  
  <div class="wapSpace"></div>
  
  <div class="stroy1_hot mar_b">
    <h5 class="popular_tit pad">全部故事 <a href="story1_allList.html" class="more" @click="goList">更多</a></h5>
    <div class="stroy1_hot_box clearfix" v-for="items3 in stroy_all" @click="goInner(items3.oldstory_id)">
      <a href="stroy1_inner.html">
      <div class="stroy1_hot_img">
        <img :src="items3.pic" width="100%">
      </div>
      <div class="stroy1_hot_text">
        <h5>{{items3.title}}</h5>
        <p class="text">
          {{items3.content}}
        </p>
        <div class="stroy_function clearfix">
          <span class="left">人气：{{items3.popularity}}</span>
          <span class="right">编号：{{items3.number}}</span>
        </div>
      </div>
      </a>
    </div>
  </div>

  <div class="wapSpace"></div>
  
  
  </div>
  

</div>
<!--  / warpper  -->



<!--  / footer  -->
<!-- <div class="footer">
  <ul class="clearfix">
    <a href="index.html">
    <li>
        <div class="footer_img footer_img1">
            <img src="images/ic_home_home_gray.png">
            <img src="images/ic_home_home_yellow.png">
        </div>
        <span>主页</span>
    </li>
    </a>
    <a href="stroy1.html">
    <li class="on">
        <div class="footer_img footer_img1">
            <img src="images/ic_home_yishu_gray.png">
            <img src="images/ic_home_yishu_yellow.png">
        </div>
        <span>老故事</span>
    </li>
  </a>
  <a href="bigStage.html">
    <li class="ind_share_btn">
        <div class="footer_img footer_img2">
            <img src="images/ic_dibutiao_shandu_gray.png">
            <img src="images/ic_dibutiao_shandu_yellow.png">
        </div>
  </li>
  </a>
  
  <a href="JavaScript:void(0);" id='getOrder'>
    <li id="goOrder">
        <div class="footer_img footer_img1">
            <img src="images/ic_home_dingdan_gray.png">
            <img src="images/ic_home_dingdan_yellow.png">
        </div>
        <span>订单</span>
  </li>
    </a>
    
    <a href="JavaScript:void(0);" id='getUser'>
    <li id="goUser">
      <div class="footer_img footer_img1">
            <img src="images/ic_home_geren_gray.png"> 
            <img src="images/ic_home_geren_yellow.png"> 
      </div>  
        <span>我的</span>
    </li>
    </a>
  </ul>
</div> -->
<footer1></footer1>
<!--  / footer  -->
</div>
</body>
<script>
$(window).ready(function(){
	
	var vm = new Vue({
		el:"#app",
		data(){
			return{
				story_cate:[],
        stroy_rules:[],
        stroy_best:[],
        stroy_hot:[],
        stroy_all:[],
        cateId:'1',
			}
		},
		created:function(){
			var $this = this;
			$this.getCate();
      $this.getStoryRules();
      $this.getBest();
      $this.getHot();
      $this.getAll();
																	
		},
		mounted:function(){
      // goOther();
			
		},
    methods:{
			//获取分类
			getCate:function(){
        var $this = this;
				const data = {
				
				}
				Axios.post(window.Url.stroy_cate,data).then((res) => {
					
					if(res.result == 1){
						$this.story_cate = res.info.cate;
            $this.$nextTick(function () {
              var mySwiper_strclass = new Swiper ('.swiper-stroy1_class', {
                slidesPerView: 4,
              }) 
            })
           																	  
					}else
					{
						console.log("老故事分类:"+res.info);
					}
					
				}).catch((err) => {
					console.log("老故事分类:"+err);
				})
			
			},

			//获取分类内容
			getCateList:function(cateId1){
        var $this = this;
				$this.cateId=cateId1;
        $this.getBest();
        $this.getHot();
        $this.getAll();
			},

      //跳转到老故事列表页
      goList:function(){
        var $this = this;
        setCookie("cateId",$this.cateId);
      },

      //获取老故事规则
      getStoryRules:function(){
        var $this = this;
        const data = {
        
        }
        Axios.post(window.Url.stroy_rules,data).then((res) => {
          
          if(res.result == 1){
            $this.stroy_rules = res;
            // console.log($this.stroy_rules);
                                    
          }else
          {
            console.log("老故事规则:"+res.info);
          }
          
        }).catch((err) => {
          console.log("老故事规则:"+err);
        })
         
      },

      //获取最佳人气接口

      getBest:function(){
        var $this = this;
        
        const data = {
              city:'',
              cate_id:$this.cateId
        }

        data.city=sessionStorage.getItem("cityLocation");

        Axios.post(window.Url.stroy_best,data).then((res) => {
          
          if(res.result == 1){
            $this.stroy_best = res.info.oldstory;                                    
          }else
          {
            console.log("最佳人气:"+res.info);
          }
          
        }).catch((err) => {
          console.log("最佳人气:"+err);
        })
      
      },

      //获取热门故事接口

      getHot:function(){
        var $this = this;
        
        const data = {
              city:'',
              cate_id:$this.cateId
        }

        data.city=sessionStorage.getItem("cityLocation");

        Axios.post(window.Url.stroy_hot,data).then((res) => {
          
          if(res.result == 1){
            $this.stroy_hot = res.info.oldstory;
                                    
          }else
          {
            console.log("热门故事:"+res.info)
          }
          
        }).catch((err) => {
          console.log("热门故事:"+err)
        })
      
      },

      //获取全部故事接口

      getAll:function(){
        var $this = this;
        
        const data = {
              city:'',
              cate_id:$this.cateId
        }

        data.city=sessionStorage.getItem("cityLocation");

        Axios.post(window.Url.stroy_all,data).then((res) => {
          
          if(res.result == 1){
            $this.stroy_all = res.info.oldstory;
                                    
          }else
          {
            console.log("全部故事:"+res.info);
          }
          
        }).catch((err) => {
          console.log("全部故事:"+err);
        })
      
      },

      //跳转到老故事详情页
      goInner:function(oldstoryId){
         setCookie("oldstoryId",oldstoryId);
      }


			
			
		}

	})
	
	
  $('.popular_img img').height($(window).width()*610/1008);
  var mySwiper_banner = new Swiper ('.swiper-stroy_banr', {
    loop: true,
  	autoplay : 5000,
  	autoplayDisableOnInteraction : false,
  })
  
 

  $(window).load(function(){
    $(".stroy1_hot_text").height($(".stroy1_hot_img").width()*268/359);
  })
  $(window).resize(function(){
    $(".stroy1_hot_text").height($(".stroy1_hot_img").width()*268/359);
  })
  // $('.ind_share_btn').click(function(){
	 //  window.location.href = "bigStage.html";
  // });
  // $('#goOrder').click(function(){
	 //  window.location.href = "orderList.html";
  // });
})  
</script>
</html>
